<template>
  <h1>组合API-toRefs 函数</h1>
  <h2>{{ user.name }}</h2>
  <h2>{{ name }}</h2>
  <button @click="user.name += '~'">改名字</button>
</template>

<script setup lang="ts">
import { ref, toRefs } from "vue";

const user = ref({
  name: "zs",
  age: 18,
});

// ❌ 直接解构失去响应式
// const { name } = user.value;

// ✅ 使用 toRefs 可以保证该对象展开的每个属性都是响应式的
const { name } = toRefs(user.value);

console.log(name.value);
</script>